<script setup lang="ts">
import { computed, withDefaults } from 'vue'

defineExpose({
  name: 'SelfTransferAccounts'
})

const props = withDefaults(defineProps<{
  message: string | number | undefined,
  src: string | undefined
  isReceive?: boolean
}>(), {
  isReceive: false
})

const getTriangleColor = computed(() => {
  return props.isReceive ? '#FDE1C3' : '#FA9C3A'
})
</script>

<template>
  <!-- 自己消息 -->
  <div class="myself-message-box">
    <!-- 头像 -->
    <div class="avatar-box">
      <img class="avatar" :src="src || '../public/images/avatar/avatar-220.jpg'" alt="">
    </div>
    <!-- 对方聊天消息框 -->
    <div class="myself-message relative" :class="[isReceive ? 'is-receive' : 'not-receive']">
      <!-- 转账消息盒子 -->
      <div class="money-box flex">
        <div class="icon">
          <img v-if="!isReceive" class="w-full h-full" src="../images/transfer-icon.png" alt="">
          <img v-else class="w-full h-full" src="../images/is-receive.png" alt="">
        </div>
        <div class="info">
          <!-- 转账金额 -->
          <div class="money text-white">
            <span class="money-char">￥</span>
            <span>{{ message }}</span>
          </div>
          <!-- 转账说明 -->
          <div class="transfer-instruction text-white">
            <span v-if="!isReceive">你发起了一笔转账</span>
            <span v-else>已被接收</span>
          </div>
        </div>
      </div>
      <!-- 微信转账 -->
      <div class="bottom text-white" :class="[isReceive ? 'is-receive-border' : 'not-receive-border']">微信转账</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.not-receive {
  background-color: #FA9C3A;
}

.is-receive {
  background-color: #FDE1C3;
}

.not-receive-border {
  border-top: 1px solid #FAA54C;
}

.is-receive-border {
  border-top: 1px solid #FDE4CA;
}

.myself-message-box {
  display: flex;
  justify-content: end;
  flex-direction: row-reverse;
  margin-bottom: $message-message-space;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;

  .avatar-box {
    overflow: hidden;
    width: $avatar-size;
    height: $avatar-size;
    border-radius: $avatar-radius;
    margin-left: $avatar-message-space;

    .avatar {
      width: $avatar-size;
      border-radius: $avatar-radius;
      height: $avatar-size;
      object-fit: cover;
    }
  }

  .myself-message {

    width: 245px;
    border-radius: $message-box-radius;
    padding: 10px 10px 0 10px;

    .money-box {

      .icon {
        width: 40px;
        height: 40px;
        margin-left: 2px;
        margin-top: 2px;
        margin-right: 11px;
      }

      .info {
        .money {
          font-family: 'WeChatSans Std', serif;
          font-weight: 500;
          // 禁止文本换行
          white-space: nowrap;

          .money-char {
            font-family: 'WeChatSans Std', serif;
            font-weight: normal;
            // 字体描边实现加粗
            -webkit-text-stroke: 0.2px currentColor;
          }
        }

        .transfer-instruction {
          font-size: 11px;
          font-family: 'PingFang SC', sans-serif;
        }
      }
    }

    .bottom {
      font-size: 11px;
      margin-top: 14px;
      font-family: 'PingFangSC-Light-woff2', sans-serif;
      padding: 2px;
    }

    &:after {
      content: '';
      position: absolute;
      right: -11px;
      top: 15px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-left: 6px solid v-bind(getTriangleColor);
    }
  }
}
</style>